<template>
  <div class="body">
    <el-button type="info" icon="el-icon-refresh-right"></el-button>
    <el-button type="success" icon="el-icon-plus" @click="handleAdd"
      >添加</el-button
    >
    <el-button type="primary" icon="el-icon-edit" @click="handleUpdate"
      >编辑</el-button
    >
    <el-button type="danger" icon="el-icon-delete">删除</el-button>
    <el-button type="primary" icon="el-icon-upload2">导出</el-button>
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      class="table"
      @selection-change="handleSelectionChange"
    >
      <el-table-column align="center" type="selection" width="55"> </el-table-column>

      <el-table-column align="center" prop="id" label="ID" width="120">
        <!-- <template slot-scope="scope">{{ scope.id }}</template> -->
      </el-table-column>
      <el-table-column align="center" prop="cardname" label="员工姓名" width="120">
      </el-table-column>
      <el-table-column align="center" prop="nickname" label="用户名"> </el-table-column>
      <el-table-column align="center" prop="username" label="账号"> </el-table-column>
      <el-table-column align="center" prop="password" label="密码" width="280">
        <!-- <template slot-scope="scope">{{ scope.row.date }}</template> -->
      </el-table-column>
      <el-table-column align="center" prop="deptname" label="员工部门" width="120">
      </el-table-column>
      <el-table-column align="center" prop="prevtime" label="上次登录时间"> </el-table-column>
      <el-table-column align="center" prop="createtime" label="创建时间" width="200">
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleUpdate(scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handlesc(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增或修改 -->
    <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-select
          @change="bumen"
          v-model="form.name1"
          clearable
          placeholder="请选择部门"
        >
          <el-option
            v-for="item in options1"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
        <el-select
          @change="bumens"
          v-model="form.name2"
          clearable
          placeholder="请选择职位"
        >
          <el-option
            v-for="item in options2"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
        <el-select
          @change="bumenss"
          v-model="form.deptname"
          clearable
          placeholder="请选择小组"
        >
          <el-option
            v-for="item in options3"
            :key="item.id"
            :label="item.name"
            :value="item"
          >
          </el-option>
        </el-select>
  <div style="display: flex;justify-content: center;margin-top: 20px;">
	   <div>
		   <el-form-item label="账号">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="form.nickname"></el-input>
        </el-form-item>
        <el-form-item label="真实姓名">
          <el-input v-model="form.cardname"></el-input>
        </el-form-item>
	 </div>
   <div>
	     <el-form-item label="密码">
          <el-input v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item label="电子邮箱">
          <el-input v-model="form.email"></el-input>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model="form.mobile"></el-input>
        </el-form-item>
   </div>
  </div>
  <div style="display: flex;justify-content: center;">
	 <el-button @click="onSubmit" type="primary">确定</el-button>
          <!-- <el-button style="margin: 0px;" type="primary" >确定</el-button> -->
          <el-button @click="cancel">取消</el-button>
  </div>
  
      </el-form>
    </el-dialog>

      <div class="block">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30]"
        :page-size="params.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { stafflist, distribution, staffadd ,staffdel,staffedit} from "@/api/staff.js";
export default {
  data() {
    return {
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
        params: {
        offset: 0,
        limit: 10,
        keywords: "",
        zhuangtai: 0,
        user_id: sessionStorage.getItem("id"),
      },
total: null,
      // 表单参数
      form: {
        name1: "",
        name2: "",
        name3: "",
        dept: "",
        user_id:"",
        id:"",
        deptname: "",
        username: "",
        nickname: "",
        cardname: "",
        password: "",
        email: "",
        mobile: "",
      },
      // 表单校验
      rules: {},
      options1: [], //选择部门
      options2: [], //选择职位
      options3: [
        {
          value: "HTML",
          label: "HTML",
        },
        {
          value: "CSS",
          label: "CSS",
        },
        {
          value: "JavaScript",
          label: "JavaScript",
        },
      ], //选择小组
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      tableData: [],
      multipleSelection: [],
    };
  },
  created() {
    // var bbc={
    //     user_id:sessionStorage.getItem('id')
    // }
    stafflist(this.params).then((response) => {
		console.log("asdas",response)
      var bbc = response.data.rows;
         this.total = response.data.total;
      bbc.forEach((element) => {
        element.prevtime = this.format(Number(element.prevtime));
        element.createtime = this.format(Number(element.createtime));
      });
      this.tableData = bbc;
      // console.log(response.data)
    });
    this.distribution();
  },
  methods: {
    bumen(value) {
      distribution(value).then((response) => {
        this.options2 = response.data.rows;
        console.log("部门", response.data.rows);
      });
    },
    bumens(value) {
      distribution(value).then((response) => {
        this.options3 = response.data.rows;
        console.log("小组", response.data.rows);
      });
    },
    bumenss(value) {
      (this.form.dept = value.id),
        (this.form.deptname = value.name),
        console.log(this.form);
    },
    distribution() {
      distribution().then((response) => {
        this.options1 = response.data.rows;
        console.log(" 分配审核人员", response.data.rows);
      });
    },
    format(shijianchuo) {
   if(shijianchuo==0){
        return ""
      }
         var date = new Date(shijianchuo * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var Y = date.getFullYear() + '-';
        var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1):date.getMonth()+1) + '-';
        var D = (date.getDate()< 10 ? '0'+date.getDate():date.getDate())+ ' ';
        var h = (date.getHours() < 10 ? '0'+date.getHours():date.getHours())+ ':';
        var m = (date.getMinutes() < 10 ? '0'+date.getMinutes():date.getMinutes()) + ':';
        var s = date.getSeconds() < 10 ? '0'+date.getSeconds():date.getSeconds();
        return Y+M+D+h+m+s;
    },

    // 表单重置
    reset() {
      this.form = {
        name1: "",
        name2: "",
        name3: "",
        dept: "",
        user_id:"",
        id:"",
        deptname: "",
        username: "",
        nickname: "",
        cardname: "",
        password: "",
        email: "",
        mobile: "",
      };
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    //新增按钮操作
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加员工";
    },
    //修改
    handleUpdate(e) {
      console.log(e);
	  this.form=e
      // this.reset();
      this.open = true;
      this.title = "修改员工信息";
    },
	handlesc(e){
		console.log(e)
    var bbc={
      id:e.id,
      user_id:sessionStorage.getItem('user_id')
    }
  this.$confirm('此操作将删除该员工, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
staffdel(bbc).then((response) => {
          // this.options1 = response.data.rows;
          console.log("删除员工", response);
        });
        //   this.$message({
        //     type: 'success',
        //     message: '删除成功!'
        //   });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
	},
    //提交按钮
    onSubmit() {
      if (this.title == "修改员工信息") {
        console.log("修改");
        this.form.user_id=sessionStorage.getItem('user_id')
       staffedit(this.form).then((response) => {
        
          // this.options1 = response.data.rows;
          if(response.code==1){
            this.$message({
            type: 'success',
            message: '修改成功!'
          });
 
        this.open = false;
          }
          console.log("修改员工", response);
        });
      } else {
        console.log(this.form);
        this.form.user_id=sessionStorage.getItem('user_id')
        staffadd(this.form).then((response) => {
          // this.options1 = response.data.rows;
          if(response.code==1){
            this.$message({
            type: 'success',
            message: '新增成功!'
          });
          }
          console.log("新增员工", response);
        });

        this.open = false;
      }
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
   handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.params.limit = val;
console.log("yi0",this.params)
       stafflist(this.params).then((response) => {
		console.log("asdas",response)
      var bbc = response.data.rows;
         this.total = response.data.total;
      bbc.forEach((element) => {
        element.prevtime = this.format(Number(element.prevtime));
        element.createtime = this.format(Number(element.createtime));
      });
      this.tableData = bbc;
      // console.log(response.data)
    });
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);

      this.params.offset = parseInt(val - 1) * this.params.limit;
console.log("yi2",this.params)
       stafflist(this.params).then((response) => {
		console.log("asdas",response)
      var bbc = response.data.rows;
         this.total = response.data.total;
      bbc.forEach((element) => {
        element.prevtime = this.format(Number(element.prevtime));
        element.createtime = this.format(Number(element.createtime));
      });
      this.tableData = bbc;
      // console.log(response.data)
    });
    },
  },
};
</script>

<style scoped>


.table {
  width: 100%;
  margin-top: 2vh;
}

.block {
  position: fixed;
  bottom: 20px;
  right: 20px;
}
</style>
